<template>
	<div class="side-left-right">
		<div class="item-plane">
			<div class="item_1">
				<div class="head">
					<span class="title">本月产率%统计--旋转靶</span>
				</div>
				<div class="chart">
					<v-chart :dSource="datState1"></v-chart>
				</div>
			</div>
			<div class="item_2">
				<div class="head">
					<span class="title">本月产率%统计--平面靶</span>
				</div>
				<div class="chart">
					<v-chart :dSource="datState2"></v-chart>
				</div>
			</div>
			<div class="item_3">
				<div class="head">
					<span class="title">本月产率%统计--粉制备</span>
				</div>
				<div class="chart">
					<v-chart :dSource="datState3"></v-chart>
				</div>
				<!-- <div class="chart">
					<v-chart :dSource="datState"></v-chart>
				</div> -->
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	computed,
	onMounted,
	reactive,
	nextTick,
	watch,
	toRefs
	, ref
} from "vue";
import {
	useStore
} from "vuex";
import vChart from "mChart/chart.vue";
import * as echarts from 'echarts';
import apis from '@/api/indexapi.js';
//请求的实例
const _api = apis();
const datState1 = ref({})
const datState2 = ref({})
const datState3 = ref({})
//本月产率%统计--旋转靶
const rotating = (() => {
	const params = {
		pathId: 222,
		parameter: JSON.stringify({
			deploymentName: "rotatingTargetYield2",
			requestMap: {
        product_line: "a"
      },
      syncStatus: false
		})
	}
	_api.hDoPost(window.apiUrl, null, params, (res) => {
		let data = JSON.parse(res);
		const Xdata = [];
		const product = [];
		const invest = [];
		const line = [];
		data.body.getData.forEach(item => {
			Xdata.push(item.operation_name); // operation_name 作为X轴数据
			product.push(item.out_qty); // out_qty 作为产出数据
			invest.push(item.in_qty); // in_qty 作为投入数据
			// 计算 yield 比率，百分比格式
			const yieldValue = (item.out_qty / item.in_qty * 100).toFixed(1);
			line.push(parseFloat(yieldValue)); // 将比率转换为数字并放入 line
		});
		datState1.value = cube(Xdata, product, invest, line);
	})
})
//本月产率%统计--平面靶
const Planar = (() => {
	const params = {
		pathId: 222,
		parameter: JSON.stringify({
			deploymentName: "planarTargetYield",
			requestMap: {
        product_line: "a"
      },
      syncStatus: false
		})
	}
	_api.hDoPost(window.apiUrl, null, params, (res) => {
		let data = JSON.parse(res);
		const Xdata = [];
		const product = [];
		const invest = [];
		const line = [];
		data.body.getData.forEach(item => {
			Xdata.push(item.operation_name); // operation_name 作为X轴数据
			product.push(item.out_qty); // out_qty 作为产出数据
			invest.push(item.in_qty); // in_qty 作为投入数据
			// 计算 yield 比率，百分比格式
			const yieldValue = (item.out_qty / item.in_qty * 100).toFixed(1);
			line.push(parseFloat(yieldValue)); // 将比率转换为数字并放入 line
		});
		datState2.value = cube(Xdata, product, invest, line);
	})
})
//本月产率%统计--粉制备
const Powder = (() => {
	const params = {
		pathId: 222,
		parameter: JSON.stringify({
			deploymentName: "powderPreparationProcess",
			requestMap: {
        product_line: "a"
      },
      syncStatus: false
		})
	}
	_api.hDoPost(window.apiUrl, null, params, (res) => {
		let data = JSON.parse(res);
		const Xdata = [];
		const product = [];
		const invest = [];
		const line = [];
		data.body.getData.forEach(item => {
			Xdata.push(item.operation_name); // operation_name 作为X轴数据
			product.push(item.out_qty); // out_qty 作为产出数据
			invest.push(item.in_qty); // in_qty 作为投入数据
			// 计算 yield 比率，百分比格式
			const yieldValue = (item.out_qty / item.in_qty * 100).toFixed(1);
			line.push(parseFloat(yieldValue)); // 将比率转换为数字并放入 line
		});
		datState3.value = cube(Xdata, product, invest, line);
	})
})
//工单统计
const production = ref([
	{ name: '生产计划', url: "/imgs/hf2/product.png", value: 100 },
	{ name: '普通工单', url: "/imgs/hf/order.png", value: 100 },
])
//最新保单
const newOrder = ref([
	{ name: '完成工单', time: "2025/12/31 12:59", type: "自动报单", progress: "100%", rate: "100%", url: "/imgs/hf2/product.png", value: 100 },
	{ name: '完成工单', time: "2025/12/31 12:59", type: "自动报单", progress: "100%", rate: "100%", url: "/imgs/hf2/product.png", value: 100 },
	{ name: '完成工单', time: "2025/12/31 12:59", type: "自动报单", progress: "100%", rate: "100%", url: "/imgs/hf2/product.png", value: 100 },
	{ name: '完成工单', time: "2025/12/31 12:59", type: "自动报单", progress: "100%", rate: "100%", url: "/imgs/hf2/product.png", value: 100 },
	{ name: '完成工单', time: "2025/12/31 12:59", type: "自动报单", progress: "100%", rate: "100%", url: "/imgs/hf2/product.png", value: 100 },
	{ name: '完成工单', time: "2025/12/31 12:59", type: "自动报单", progress: "100%", rate: "100%", url: "/imgs/hf2/product.png", value: 100 },
])
const props = defineProps({
	data: {
		type: Object,
		default: {
			nh: null,
			fx: null,
		}
	},
});
function createCylindricalBar(options = {}) {
	// 默认参数配置
	const {
		thickness = 50,                    // 柱子基础宽度
		widthRatio = 0.5,                 // 柱子宽度比例
		symbolRatio = 0.5,                // 标志高度比例
		symbolOffset = 0.2,               // 标志偏移比例
		xAxisData = [],                   // x轴数据
		seriesData = [],                  // 系列数据
		colors = {
			green: {
				main: '#49E9A8',              // 主色
				dark: '#1b9d6d',              // 暗色
				symbol: '#2BCF8C'             // 标志色
			},
			red: {
				main: '#FF6E6E',              // 主色
				dark: '#cc3b3b',              // 暗色
				symbol: '#FF4B4B'             // 标志色
			}
		}
	} = options;
	const baseWidth = thickness * widthRatio;  // 计算实际柱子宽度
	return {
		title: {
			text: '满足率%',
			left: 14,
			top: -4,
			textStyle: {
				width: ' 51px',
				height: '13px',
				fontFamily: 'Adobe Heiti Std',
				fontWeight: 'normal',
				fontSize: '13px',
				color: '#1277F2',
				fontStyle: 'italic',

			},
		},
		grid: {
			left: '8%',
			right: '8%',
			top: '15%',
			bottom: '5%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			data: xAxisData,
			axisTick: { show: false },
			axisLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } },
			axisLabel: {
				color: '#FFFFFF',
				fontSize: 12,
				margin: 20
			}
		},
		yAxis: {
			type: 'value',
			axisTick: { show: false },
			axisLine: { show: false },
			axisLabel: { color: '#ffffff', fontSize: 12 },
			splitLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } }
		},
		series: [
			// 绿色柱子主体
			{
				type: 'bar',
				barWidth: baseWidth,
				stack: 'stack',
				z: 2,
				data: seriesData.map(item => item[0]),
				itemStyle: {
					color: {
						type: 'linear',
						x: 0, y: 0, x2: 1, y2: 0,
						colorStops: [
							{ offset: 0, color: colors.green.dark },
							{ offset: 0.5, color: colors.green.main },
							{ offset: 1, color: colors.green.dark }
						]
					}
				}
			},
			// 绿色柱子底部标志
			{
				type: 'pictorialBar',
				symbolSize: [baseWidth, baseWidth * symbolRatio],
				symbolOffset: [0, baseWidth * symbolOffset],
				symbolPosition: 'start',
				z: 1,
				data: seriesData.map(item => item[0]),
				itemStyle: {
					color: colors.green.symbol
				}
			},
			// 中间过渡连接
			{
				type: 'bar',
				barWidth: baseWidth,
				stack: 'stack',
				z: 3,
				data: seriesData.map(item => ({
					value: 0.1,  // 很小的高度
					itemStyle: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{ offset: 0, color: colors.green.main },
							{ offset: 0.5, color: colors.red.main },
							{ offset: 1, color: colors.red.main }
						])
					}
				})),
			},
			// 红色柱子主体
			{
				type: 'bar',
				barWidth: baseWidth,
				stack: 'stack',
				z: 4,
				data: seriesData.map(item => item[1]),
				itemStyle: {
					color: {
						type: 'linear',
						x: 0, y: 0, x2: 1, y2: 0,
						colorStops: [
							{ offset: 0, color: colors.red.dark },
							{ offset: 0.5, color: colors.red.main },
							{ offset: 1, color: colors.red.dark }
						]
					}
				}
			},
			// 红色柱子顶部标志
			{
				type: 'pictorialBar',
				symbolSize: [baseWidth, baseWidth * symbolRatio],
				symbolOffset: [0, -baseWidth * symbolOffset],
				symbolPosition: 'end',
				z: 5,
				stack: 'stack',
				data: seriesData.map(item => item[0] + item[1]),
				itemStyle: {
					color: colors.red.symbol
				}
			},
			// 折线图
			{
				type: 'line',
				data: [100, 100, 100, 100, 100, 100],  // 使用柱子总和的高度
				smooth: true,
				symbol: 'circle',
				symbolSize: 8,
				lineStyle: {
					color: '#1AFFC6', // 可以设置折线图的颜色
					width: 3
				},
				itemStyle: {
					color: '#1AFFC6' // 改为红色圆点
				},
				z: 6  // 确保折线图在顶部显示
			}
		]
	};
}

// datState1 = reactive(cube(['XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料'], [10, 6, 9, 26, 50, 20], [10, 6, 9, 26, 50, 20], [10, 6, 9, 26, 50, 20]));
// const datState1 = reactive(createCylindricalBar1(20, 25, '#49E9A8', ['XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料'], [], [10, 6, 9, 26, 50, 20]));
// const datState2 = reactive(createCylindricalBar1(20, 25, '#49E9A8', ['XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料'], [], [10, 6, 9, 26, 50, 20]));
// const datState3 = reactive(createCylindricalBar1(20, 25, '#49E9A8', ['XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料'], [], [10, 6, 9, 26, 50, 20]));

function cube(Xdata, invest, product, line) {
	return {
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: 'white'
				}
			},
		},
		grid: {
			borderColor: 'transparent', // 去除边框
			backgroundColor: 'transparent', // 去除背景
		},
		legend: {
			data: ['投入', '产出'],
			textStyle: {
				fontSize: 14,
				color: 'white'
			},
		},
		xAxis: [
			{
				type: 'category',
				data: Xdata,
				axisPointer: {
					type: 'shadow'
				},
				axisLine: {
					lineStyle: {
						show: false,//是否显示坐标轴轴线，
						color: '#E5E5E5',//x轴轴线的颜色
					}

				}
			}
		],
		yAxis: [
			{
				type: 'value',
				axisLabel: {
					color: 'white', // 设置Y轴文字颜色为白色
					formatter: '{value}'
				},
				splitLine: {
					show: false,
				},
			},
			{
				type: 'value',
				axisLabel: {
					formatter: '{value} %'
					, show: false
				},
				splitLine: {
					lineStyle: {
						type: 'dashed', // 虚线样式
						color: 'rgba(255, 255, 255, 0)' // 虚线颜色
					}
				},
			},
		],
		series: [
			{
				name: '投入',
				type: 'bar',
				barWidth: 15,
				tooltip: {
					valueFormatter: function (value) {
						return value;
					}
				},
				data: invest
			},
			{
				name: '产出',
				type: 'bar',
				barWidth: 15,
				tooltip: {
					valueFormatter: function (value) {
						return value;
					}
				},
				data: product
			},
			{
				name: '比率',
				type: 'line',
				yAxisIndex: 1,
				tooltip: {
					valueFormatter: function (value) {
						return value + '%';
					}
				},
				data: line
			}
		]
	}
}




function createCylindricalBar1(size, thickness, color, xAxisData, yAxisData, seriesData) {
	return {
		title: {
			text: '%',
			left: 16,
			textStyle: {
				color: color,
				fontStyle: 'normal',
				fontWeight: 'bolder',
				fontSize: 14,
			}
		},
		grid: {
			left: '5%',
			right: '5%',
			// top: '5%',
			top: '15%',
			bottom: '5%',
			containLabel: true
		},
		tooltip: {
			trigger: 'item',
			formatter: function (parms) {
				return parms.marker + " " + parms.name + "：" + parms.value + "万元";
			}
		},
		xAxis: {
			type: 'category',
			data: xAxisData,
			axisTick: { show: false },
			axisLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } },
			axisLabel: {
				color: '#FFFFFF', // 文字颜色
				fontSize: 12, // 字体大小
				fontFamily: 'Adobe Heiti Std', // 字体
				fontWeight: 'normal', // 字体粗细
				fontStyle: 'italic', // 斜体字
				// lineHeight: 80, // 行高
				margin: 20 // 距离坐标轴的间距
			}
		},
		yAxis: {
			type: 'value',
			axisTick: { show: false },
			axisLine: { show: false },
			axisLabel: { color: '#ffffff', fontSize: 12 },
			splitLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } }
		},
		series: [
			{
				type: "pictorialBar",
				// label: {
				//   show: true,
				//   position: ['17', '-30'],
				//   color: color,
				//   fontSize: 14
				// },
				symbolSize: [thickness, size],
				symbolOffset: [0, 10],
				z: 12,
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: color },
						{ offset: 1, color: color }
					])
				},
				data: seriesData
			},
			{
				type: 'bar',
				barWidth: thickness,
				barGap: '0%',
				itemStyle: {
					color: {
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						type: "linear",
						global: false,
						colorStops: [
							{ offset: 0, color: "#A3FFD5" },
							{ offset: 1, color: "#2BCF8C" }
						]
					}
				},
				data: seriesData
			},
			{
				type: "pictorialBar",
				symbolSize: [thickness, size],
				symbolOffset: [0, -10],
				z: 12,
				symbolPosition: "end",
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{ offset: 0, color: color },
						{ offset: 1, color: color }
					], false)
				},
				data: seriesData
			},
		]
	};
}
const datState = reactive(createCylindricalBar({
	thickness: 30,                // 基础宽度
	widthRatio: 0.5,             // 宽度比例
	symbolRatio: 0.5,            // 标志高度比例
	symbolOffset: 0.2,           // 标志偏移比例
	xAxisData: ['XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料', 'XX物料'],
	seriesData: [
		[60, 20],  // [绿色部分, 红色部分]
		[50, 30],
		[45, 25],
		[65, 15],
		[70, 30],
		[55, 25]
	],
	targetData: [100, 100, 100, 100, 100, 100], // 增加目标数据 (折线图)
	colors: {
		green: {
			main: '#CCDFFF',
			dark: '#2E85D7',
			symbol: '#2E85D7'
		},
		red: {
			main: '#FFEAD4',
			dark: '#D7862E',
			symbol: '#D7862E'
		}
	}
}));
onMounted(() => {
	rotating();
	Planar();
	Powder();
})
</script>



<style scoped lang="scss">
.side-left-right {
	padding: 0 0;
	// width: 392px;
}

.item-plane {
	padding: 0 0;
	display: flex;
	justify-content: space-between;
}

.item_1 {
	height: 30%;

	.head {
		width: 100%;
		display: flex;
		height: 45px;
		background-image: url('/imgs/hf/navi.png');
		background-position: left;
		background-size: 100% 100%;

		.title {
			margin-top: 9px;
			margin-left: 83px;
			width: auto;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			font-size: 24px;
			color: #FFFFFF;
			background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.box {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 20px 61px;
		justify-content: flex-start;
		margin-top: 10px;
		margin-left: 25px;
		background-position: left;
		background-size: 100% 100%;

		.shang {
			display: flex;
			/* 启用 flex 布局 */
			position: relative;

			/* 使 title 和 value 可以通过绝对定位相对于 shang 定位 */
			/* 使内容垂直居中 */
			.picture {
				width: 72px;
				height: 73px;
				background-position: left;
				background-size: 100% 100%;
			}

			.title {
				top: 0;
				/* title 在图片的上方 */
				width: auto;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 16px;
				color: #FFFFFF;
				line-height: 35px;
				font-style: italic;
			}

			.bg {
				display: flex;
				justify-content: center;
				top: 31px;
				position: absolute;
				left: 71px;
				width: 102px;
				height: 38px;
				background-image: url(/imgs/hf/titlebg.png);
				background-position: left;
				background-size: 100% 100%;

				.value {
					position: absolute;
					top: 6px;
					left: 9px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 20px;
					color: #137DFF;
					line-height: 35px;
					font-style: italic;
					background: linear-gradient(0deg, #FFFFFF 0%, #80FFC2 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

				}

				.unit {
					position: absolute;
					top: 6px;
					margin-left: 30px;
					width: 15px;
					height: 14px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 14px;
					color: #63ECCB;
					line-height: 35px;
					font-style: italic;

				}
			}
		}
	}

	.chart {
		height: 100%;
	}
}

.item_2 {
	height: 30%;

	.head {
		width: 100%;
		display: flex;
		height: 45px;
		background-image: url('/imgs/hf/navi.png');
		background-position: left;
		background-size: 100% 100%;

		.title {
			margin-top: 9px;
			margin-left: 83px;
			width: auto;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			font-size: 24px;
			color: #FFFFFF;
			background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.box {
		height: 450px;
		margin: 0 auto;
		overflow: auto;
		display: flex;
		flex-wrap: wrap;
		margin-left: 18px;
		background-position: left;
		background-size: 100% 100%;

		.shang {
			width: 100%;
			height: 82px;
			;
			background-image: url('/imgs/hf2/zuixin.png');
			background-position: left;
			background-size: 100% 100%;

			display: flex;
			flex-wrap: wrap;
			background-position: left;
			background-size: 100% 100%;
			position: relative;

			.name {
				position: absolute;
				left: 70px;
				top: 5px;
				height: 16px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 16px;
				color: #34D2FF;
				line-height: 37px;
				font-style: italic;
			}

			.time {
				position: absolute;
				left: 70px;
				top: 30px;
				height: 10px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 11px;
				color: #FFFFFF;
				line-height: 33px;
				font-style: italic;
			}

			.type {
				position: absolute;
				left: 70px;
				top: 45px;
				height: 12px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 11px;
				color: #1AFFC6;
				line-height: 33px;
				font-style: italic;
			}

			.progress {
				width: 78px;
				position: absolute;
				left: 200px;
				top: 20px;
				height: 11px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 11px;
				color: #34D2FF;
				font-style: italic;

				span {
					height: 11px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 13px;
					color: #1AFFC6;
					line-height: 33px;
					font-style: italic;
				}
			}

			.rate {
				width: 80px;
				position: absolute;
				left: 280px;
				top: 20px;
				height: 12px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 11px;
				color: #34D2FF;
				font-style: italic;

				span {
					height: 11px;
					font-family: Adobe Heiti Std;
					font-weight: normal;
					font-size: 13px;
					color: #1AFFC6;
					line-height: 33px;
					font-style: italic;
				}
			}

		}
	}

	.chart {
		height: 100%;
	}
}

.item_3 {
	height: 40%;

	.head {
		width: 100%;
		display: flex;
		height: 45px;
		background-image: url('/imgs/hf/navi.png');
		background-position: left;
		background-size: 100% 100%;

		.title {
			margin-top: 9px;
			margin-left: 83px;
			width: auto;
			font-family: YouSheBiaoTiHei;
			font-weight: 400;
			font-size: 24px;
			color: #FFFFFF;
			background: linear-gradient(180deg, #FFFFFF 50%, #77BC9C 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

	}

	.box {
		// height: 20px;
		margin: 0 auto;
		gap: 42px;
		display: flex;
		background-position: left;
		background-size: 100% 100%;

		.info {
			// height: 14px;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			font-size: 14px;
			color: #FFFFFF;
			line-height: 35px;
			font-style: italic;

			.value {
				width: 47px;
				height: 16px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 20px;
				color: #137DFF;
				line-height: 35px;
				font-style: italic;
				background: linear-gradient(0deg, #FFFFFF 0%, #B9EFFF 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}

			.unit {
				width: 8px;
				height: 12px;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 14px;
				color: #32CCFF;
				line-height: 35px;
				font-style: italic;
			}
		}
	}
	.chart {
		height: 80%;
	}
}
</style>